<!DOCTYPE html>
<p>There should be a blue square below, and no red.</p>
<div id="multicol" style="columns:2; column-gap:80px; width:100px; background:red;">
    <div id="changeMe" style="float:left;">
        <div id="spanner" style="column-span:all; height:100px; background:blue;"></div>
    </div>
</div>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script>
test(() => {
    var multicol = document.getElementById("multicol");
    var spanner = document.getElementById("spanner");
    var changeMe = document.getElementById('changeMe');
    document.documentElement.offsetTop;

    changeMe.style.cssFloat = 'none';
    assert_equals(multicol.offsetHeight, 100);
    assert_equals(spanner.offsetWidth, 100);
}, "Turn a spanner candidate's parent from float into regular block");
</script>
